<template>
	<div class="shopInfo-container">
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :LunbotuList="LunbotuList"></swiper>
					</div>
				</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-header title">{{ goodsInfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<div class="price">
						<p>
							<span class="old">市场价：<del>￥{{ goodsInfo.market_price }}</del></span>
							<span>销售价：<span class="new">￥{{ goodsInfo.sell_price }}</span></span>
						</p>
						<!-- 购买数量 -->
						<div class="purchase-number">
							<div>购买数量：</div>
							<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input id="test" class="mui-input-numbox" type="number" @change="getSelectCount" ref="num" value="1" readonly />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
						</div>
						
						<div class="price-btn">
							<mt-button type="primary">立即购买</mt-button>
							<mt-button type="danger" @click="ballSwitch">加入购物车</mt-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div>
							<p>
								<span>商品货号：</span>
								<span>{{ goodsInfo.goods_no }}</span>
							</p>
							<p>
								<span>库存情况：</span>
								<span>{{ goodsInfo.stock_quantity }}件</span>
							</p>
							<p>
								<span>上架时间：</span>
								<span>{{ goodsInfo.add_time | dataFormat('YYYY-MM-DD') }}</span>
							</p>
						</div>
					</div>
				</div>
				<div class="mui-card-footer">
					<div>
						<router-link :to="'/home/goodsDesc/' + goodsInfo.id"><mt-button type="primary" size="large" plain>图文介绍</mt-button></router-link>
						<router-link :to="'/home/goodsComment/' + goodsInfo.id"><mt-button type="danger" size="large" plain>商品评论</mt-button></router-link>
					</div>
				</div>
			</div>	
		
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import swiper from '../../publicComponent/swiper.vue';
	import mui from '../../../lib/mui/js/mui.min.js';
	export default {
		data(){
			return {
				id: this.$route.params.id,
				LunbotuList: [],
				goodsInfo: {},
				ballFlag: false,
				selectCount: 1
			}
		},
		methods: {
			getSelectCount(){
				this.selectCount = parseInt(this.$refs.num.value);
			},
			getLunbotuList(){
				this.$http.get(`api/getthumimages/${this.id}`).then(res=>{
					if (res.body.status == 0) {
						this.LunbotuList = res.body.message;
					} else {
						Toast('获取轮播图数据失败！');
					}
				})
			},
			getShopInfo(){
				this.$http.get(`api/goods/getinfo/${this.id}`).then(res=>{
					if (res.body.status == 0) {
						this.goodsInfo = res.body.message[0];
					} else {
						Toast('获取商品数据失败！');
					}
				})
			},
			ballSwitch(){
				//控制小球的
				this.ballFlag = !this.ballFlag;   
				// 商品信息对象  第一个商品的id，第二个要购买的数量，第三个为要该买的数量，第四个为购物车默认选中开关
				var goodsInfo = {
					id: this.id,
					count: this.selectCount,
					price: this.goodsInfo.sell_price,
					selected: true
				}
				// 调用mutations的addToCar方法来将商品加入购物车
				this.$store.commit('addToCar', goodsInfo);
				
			},
			beforeEnter(el){
				el.style.transform = "translate(0, 0)";
			},
			enter(el,done){
				el.offsetWidth;  //不填出bug
				
				let ballPosition = this.$refs.ball.getBoundingClientRect();
				let badgePosition = document.getElementsByClassName('mui-badge')[0].getBoundingClientRect();
				
				let leftDist = badgePosition.left - ballPosition.left;
				let topDist = badgePosition.top - ballPosition.top;
				el.style.transform = `translate(${leftDist}px, ${topDist}px)`;
				el.style.transition = "all .3s cubic-bezier(.17,.67,.83,.67)";
				done();
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag;
			}
		},
		created(){
			this.getLunbotuList();
			this.getShopInfo();
		},
		mounted(){
			mui('.mui-numbox').numbox()
		},
		components: {
			swiper
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.shopInfo-container{
		background-color: #eee;
		.price{
			span{
				color: #000;
				font-size: 14px;
			}
			.old{
				margin-right: 20px;
			}
			.new{
				font-size: 18px;
				color: red;
			}
			.purchase-number{
				display: flex;
				font-size: 14px;
				line-height: 35px;
			}
			.price-btn{
				padding-top: 10px;
			}
		}
		.mui-card-footer{
			display: block;
			button{
				margin: 10px 0;
			}
		}
		.ball{
			position: absolute;
			top: 390px;
			left: 146px;
			z-index: 100;
			width: 15px;
			height: 15px;
			border-radius: 100%;
			background: linear-gradient(red, blue);
		}
	}
</style>
